<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>radio.html</title>

	<script>
		window.onload=function(){
			var btn=document.getElementById("btnchk");
			btn.onclick=function(){
				//라디오버튼의 개수
				var len= frm.chk.length;
				for(i=0;i<len;i++){
					if(frm.chk[i].checked){
						var color=frm.chk[i].value;
						frm.re.style.backgroundColor=color;
						frm.re.value=color;
						break;
					}
				}
				
			}
		}
	
	</script>

	<style>
		#title{
		color:#555555; font-size:20px;
		}
		
		input{
		padding:6px;
		box-shadow:1px 1px 5px #cccccc;
		}
		#btnchk{
		background-image:url(../images/2.JPG);
		background-repeat: no-repeat;
		background-position:5px 10px;
		padding:10px; width:90px;
		text-align:right;
		
		}
	</style>
</head>


<body>	
	<h1 id='title'> 
		<img src='../images/1.JPG'>
			radio 버튼 제어하기
	</h1>

<form name='frm' action='' method='post'>
	<textarea rows="10" cols="50" name='re'></textarea>
	<p/>
	<label><input type='radio', name='chk' value='#000000'>검정</label>
	<label><input type='radio', name='chk' value='#ffffff'>하양</label>
	<label><input type='radio', name='chk' value='#ff0000'>빨강</label>
	<label><input type='radio', name='chk' value='#0000ff'>파랑</label>
	<label><input type='radio', name='chk' value='#ffff00'>노랑</label>
	<label><input type='radio', name='chk' value='#00ff00'>초록</label>
	<p/>
	<input type="button" value='선택' id='btnchk'>

</form>

</body>
</html>